<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app" style="color: red; font-size: 20px;"> 
    hello {{a.b}}
    <h2>{{msg}} 张三 </h2> 
    <h2>{{list}}</h2>
  </div>
  <!-- <h1>555 <span>66</span></h1> -->

  <script src="./dist/vue.js"></script>
  <script>
    // umd Vue
    // console.log(Vue);
    Vue.Mixin({
      created () {
        // console.log('1111111111111')
      }
    })

    Vue.Mixin({
      created () {
        // console.log('2222222222222')
      }
    })

    // 响应式 Vue2
    let vm = new Vue({
      el: '#app',
      data () {
        return {
          msg: 'hello',
          a: {
            b: 1111
          },
          list: [ 1,2,3,4 ],
          // arr: [{a: 1}]
        };
      },
      props:{

      },
      // watch: {
      //   msg () {
      //     console.log('4444')
      //   }
      // },
      created () {
        console.log('33333333333')
      },
      updated () {
        console.log('updated==')
      },
      computed: {

      }
    }); 

    // console.log('vm==', vm)
    // vm._data.arr.push({b: {c: 3}})
    // vm.msg = 'hello12121'

    // vue 初始渲染 -> 先初始化数据 -> 将模版进行编译 -> 变成render() -> 生成虚拟节点 ->变成真是DOM -> 放到页面上

    // vue 模版编译顺序 render template  el

    // vue生命周期 实现原理
    // 1、Vue.Mixin({})
    // 2、设计模式 订阅发布 options: {data: [], watch: []}


    // setTimeout(() => {
    //   vm.msg = '你好！';
    //   // vm._update(vm._render())
    // }, 1000)
    // 问题 自动更新
    // 1、数据变化，自动更新视图 vm._update(vm._render())
    // 2、vue中更新组件策略是：以组件为单位，给每一个组件添加一个watcher，属性变化后，调用watcher


    // 实现对象的收集依赖

    // dep和watcher的关系  多对多 computed

    // 数组收集依赖
    // 1、要给所有的对象类型增加一个dep  
    // 2、获取数组的值，会调用get方法，让当前的数组记住渲染的watcher
    // 2.1、需要获取到当前的dep
    // 2.2、当前面对数组取值的时，让数组的dep记住watcher
    // 3、更新数组的时候调用push/pop等方法，找到watcher进行更新渲染

    setTimeout(() => {
      // 如果有多次数据更新时，vm._update(vm._render())只需要执行一次 
      // 批量处理=>vue是使用异步来进行处理，数据更新后，不会马上执行
      vm.list.push(5);
      vm.list.push(6);
      vm.msg = '你好！'; // 如果更新数据 watcher._updata()方法
      // vm._update(vm._render()) // 重新封装成一个watcher

      console.log('vm===', vm)
      vm.$nextTick(() => {
        console.log(vm.$el.innerHTML)
      })
    }, 1000);

    // 回顾
    // 1、收集依赖的目的是为了实现自动更新(vm._update(vm._render()))
    // 2、创建Watcher类，进行扩展
    // 3、data 和 dep 关系，dep和watcher关系
    // 3.1、data属性和dep是一对一的关系
    // 3.2、dep和watcher是多对多的关系
  </script>
</body>
</html>